<template>
    <view class="container">
        <view class="detail-head">
            <view class="head-top row">
                <view class="head-info">
                    <view class="title">
                        电子签
                    </view>
                    <view class="name">
                        商务负责人：{{ electronInfo?.info?.salesName }}
                    </view>
                </view>
                <view :class="['head-close', electronInfo?.info?.serviceState === 2 ? 'head-close-grey' : '']">
                    {{ electronInfo?.info?.serviceState === 1 ? '已交付' : electronInfo?.info?.serviceState === 2 ? '已关闭' :
                        '已开通' }}
                </view>
            </view>
            <view class="company-box">
                <!-- @click="onGoContact" -->
                <view class="company-customer" @click="onGoContact">
                    <view>
                        关联客户：
                    </view>
                    <view class="title">
                        {{ electronInfo?.info?.companyName }}
                        <image src="@/static/home/right-arrow.png" class="arrow-img" />
                    </view>
                </view>
                <view class="company-contacts" @click="onGoCustomer">
                    <view>相关联系人：</view>
                    <view class="title">
                        <view class="contacts-list">
                            <div class="portrait-i" v-for="(item, index) in electronInfo.crmCustomContacts" :key="index">
                                <default-portrait :name="item.customName" url="" width="48" height="48" />
                            </div>
                        </view>
                        {{ electronInfo?.crmCustomContacts?.length }}人
                        <image src="@/static/home/right-arrow.png" class="arrow-img" />
                    </view>
                </view>
            </view>
        </view>
        <!-- 子弹发薪列表 -->
        <view>
            <view class="tab-radius">
                <tab-radius :list="['详细信息', '充值记录', '运营数据']" :active="payIndex" @change="onPayTab" divided="100%" />
            </view>
            <!-- 详细订单 -->
            <view class="record-list" v-if="payIndex === 0">
                <view class="record-i">
                    <view class="i-info">
                        <view class="info-row row">
                            <view class="info-row-left"> 产品开通时间： </view>
                            <text class="info-row-right">{{ electronInfo?.time?.productOpenTime }}</text>
                        </view>
                        <view class="info-row row">
                            <view class="info-row-left"> 最后修改负责人时间： </view>
                            <text class="info-row-right">{{ electronInfo?.time?.updateSalerTime }}</text>
                        </view>
                        <view class="info-row row">
                            <view class="info-row-left"> 备注： </view>
                            <text class="info-row-right">{{ electronInfo?.time?.remark ?? '——' }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 销售记录 -->
            <view class="sale-list" v-if="payIndex === 1">
                <view class="sale-i" v-for="(item, index) in rechargeList" :key="index">
                    <view class="sale-time">
                        <view class="sale-fixed-width">
                            <view class="decorate-time">
                                <view class="decorate-within"></view>
                            </view>
                        </view>
                        <!-- {{ item.payDate }} -->
                        <view class="time">{{ item.createTime }}</view>
                    </view>
                    <view :class="['sale-content row', rechargeList.length - 1 === index ? 'sale-content-active' : '']">
                        <view></view>
                        <view class="sale-content-box">
                            <view class="box">
                                <view class="row row-i row-i-active">
                                    <view>充值金额：</view>
                                    <view class="num">{{ item.payMoney }}</view>
                                </view>
                                <view class="row row-i row-i-active">
                                    <view>充值份数：</view>
                                    <view class="num">{{ item.rechargeAmount }}</view>
                                </view>
                                <view class="row row-i">
                                    <view>充值方式：</view>
                                    <view class="num">{{ item.source }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 运营数据 -->
            <view class="operate" v-if="payIndex === 2">
                <view class="operate-box">
                    <view class="operate-pay">
                        <view class="row">
                            <view class="title">运营数据</view>
                            <poput-time :list='selectTimeList' :default="timeIndex" noCustom="true"
                                @cancel="onCancelTime" />
                            <!-- <view class="screen-i screen-i-special row">
                                <image class="drop-down" src="@/static/drop-down.png" mode="scaleToFill" />
                            </view> -->
                        </view>
                        <view class="box-list">
                            <view class="box-i">
                                <view class="title">
                                    签署份数
                                </view>
                                <view class="num">
                                    {{ operateData.sign }}
                                </view>
                            </view>
                            <view class="box-i">
                                <view class="title">
                                    待签署份数
                                </view>
                                <view class="num">
                                    <text class="company"></text>{{ operateData.notSign }}
                                </view>
                            </view>
                            <view class="box-i">
                                <view class="title">
                                    签署失败份数
                                </view>
                                <view class="num">
                                    {{ operateData.signingFailed }}
                                </view>
                            </view>
                            <view class="box-i">
                                <view class="title">
                                    剩余份数
                                </view>
                                <view class="num">
                                    <text class="company"></text>{{ operateData.surplus }}
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 员工库 -->
                <view class="operate-box">
                    <view class="chart-top  row">
                        <view class="title">
                            近七日签署趋势
                        </view>
                        <view class="tab-time">
                            <!-- @change="onAnalysisTab" -->
                            <tab-capsule :list="['签署份数', '待签署', '签署失败']" :active="timeTab" @change="onTabChange" />
                        </view>
                    </view>
                    <view class="chart">
                        <qiun-data-charts class="qiun-data-charts" type="column" :opts="optsChart" :chartData="chartData"
                            :inScrollView="true" :reload="true" :reshow="true" />
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import tabRadius from '@/components/tab-radius/tab-radius.vue'
import defaultPortrait from '@/components/default-portrait/default-portrait.vue'
import tabCapsule from '../../../components/tab-capsule/tab-capsule.vue'
import poputTime from '@/components/popup-custom-time/popup-custom-time.vue'
import {
    GetpayOperateEchartsDto,
    electronInfoData,
    electronRechargeData,
    electronOperateData,
    electronChartData,
    GetElectronInfoDto,
    GetElectronRechargeDto,
    GetElectronOperateDto,
    GetElectronChartDto
} from '@/api/signing'
import user from '@/utils/user'
const dealId = ref()
const selectTimeList = ref(['全部', '昨天', '今天', '本周', '本月', '上月'])
const timeIndex = ref(3)
const startTime = ref('')
const endTime = ref('')
const cstartTime = ref('')
const cendTime = ref('')
const payIndex = ref(0)
const companyId = ref()
const electronInfo = ref({} as GetElectronInfoDto)
const rechargeList = ref([] as GetElectronRechargeDto[])
const operateData = ref({} as GetElectronOperateDto)
const cloneChartData = ref({} as GetElectronChartDto)
const operateEchartsInfo = ref({} as GetpayOperateEchartsDto)
const timeTab = ref(0)
const customer = ref('ele')
const optsChart = ref({
    dataLabel: false,
    legend: {
        show: false,
        position: 'top',
        float: 'right',
        padding: 0,
        margin: 5,
        fontSize: 8
    },
    xAxis: {
        disableGrid: true,
        fontSize: 10

    },
    yAxis: {
        disabled: false,
        disableGrid: false,
        data: [
            {
                min: 0,
                axisLine: false
            }
        ]
    },
    extra: {
        column: {
            type: 'group',
            width: 5,
            activeBgColor: '#000000',
            activeBgOpacity: 0.08,
            seriesGap: 2
        }
    }
})
const chartData = ref({
    categories: [] as string[] | number[],
    series: [
        {
            name: '',
            data: [] as number[] | string[]
        }
    ]
})

onLoad(async (options) => {
    console.log('先执行1')
    console.log(options, 'options')
    const nowyear = new Date().getFullYear()
    const nowmonth = new Date().getMonth() + 1
    cstartTime.value = formatDate(new Date(nowyear, nowmonth - 1, 1))
    cendTime.value = formatDate(new Date(nowyear, nowmonth, 0))
    await user.waitLogin()
    companyId.value = options.id
    dealId.value = options.dealId
    getElectronRechargeData()
    getElectronOperateData()
    getElectronChartData()
    getElectronInfoData()
})
const formatDate = (date: any) => {
    const myyear = date.getFullYear()
    let mymonth = date.getMonth() + 1
    let myweekday = date.getDate()
    if (mymonth < 10) {
        mymonth = "0" + mymonth
    }
    if (myweekday < 10) {
        myweekday = "0" + myweekday
    }
    return (myyear + "-" + mymonth + "-" + myweekday)
}
// onShow(async () => {
//     console.log('先执行2')
//     console.log(companyId.value, 'companyId')
// })
onShow(() => {
    if (companyId.value) {
        getElectronInfoData()
    }
})
// 去客户联系人

const onGoCustomer = async () => {
    uni.navigateTo({
        url: '/packageRemind/pages/related-contacts/related-contacts?dealId=' + dealId.value + '&companyId=' + companyId.value
    })
}

// // 去关联客户
// const onGoContact = () => {
//     uni.navigateTo({
//         url: '/packageRemind/pages/customer-detail/index?id=' + companyId.value + '&customer=' + customer.value + '&dealId=' + dealId.value
//     })
// }
const getElectronInfoData = async () => {
    const result = await electronInfoData({
        companyId: companyId.value,
        dealId: dealId.value
    })
    electronInfo.value = result
}
// 电子签充值记录
const getElectronRechargeData = async () => {
    const result = await electronRechargeData({
        companyId: companyId.value
    })
    rechargeList.value = result
}
const getElectronOperateData = async () => {
    console.log(timeIndex.value, '11111111111111111111111111111111111111111111111111')
    const result = await electronOperateData({
        companyId: companyId.value,
        startTime: cstartTime.value,
        endTime: cendTime.value
    })
    operateData.value = result
}
const getElectronChartData = async () => {
    const result = await electronChartData({
        companyId: companyId.value
    })
    console.log(result, 'result')
    cloneChartData.value = result
    await setInterceptGive()
}

// 选择时间回调
const onCancelTime = async (index: { index: number, time: undefined | string }) => {
    timeIndex.value = Number(index.index)
    console.log(index, 'index')
    startTime.value = index.time?.split(' 至 ')[0] as string
    endTime.value = index.time?.split(' 至 ')[1] as string
    cstartTime.value = index.startTime
    cendTime.value = index.endTime
    await getElectronOperateData()
}

// 图表数据截取赋值
const setInterceptGive = () => {
    const echartsInfoData = JSON.parse(JSON.stringify(operateEchartsInfo.value))
    console.log(echartsInfoData, 'echartsInfoData')
    if (Number(timeTab.value) === 0) {
        chartData.value.series[0].data = cloneChartData.value.signQuantity
        chartData.value.series[0].name = '签署份数'
        chartData.value.categories = cloneChartData.value.day.map(item => {
            return item.split('-')[1] + '/' + item.split('-')[2]
        })
    } else if (Number(timeTab.value) === 1) {
        chartData.value.series[0].data = cloneChartData.value.toBeSigned
        chartData.value.categories = cloneChartData.value.day.map(item => {
            return item.split('-')[1] + '/' + item.split('-')[2]
        })
        chartData.value.series[0].name = '待签署'
    } else {
        chartData.value.series[0].data = cloneChartData.value.signingFailed
        chartData.value.categories = cloneChartData.value.day.map(item => {
            return item.split('-')[1] + '/' + item.split('-')[2]
        })
        chartData.value.series[0].name = '签署失败'
    }
    console.log(chartData.value, 'chartData')
}
// tab发薪胶囊回调
const onPayTab = async (index: number) => {
    payIndex.value = index
}
const onTabChange = async (index: number) => {
    timeTab.value = index
    await setInterceptGive()
}
</script>
<style lang="scss" scoped>
.container {
    background: #fafafc;
    padding-bottom: 0;
    min-height: 100vh;
}

.tab-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-radius {
    margin-top: 30rpx;
    padding: 0rpx 30rpx;
}

.scroll {
    height: 100vh;
}

.record-list {
    padding: 0 30rpx;
    margin-top: 34rpx;

    .record-i {
        padding: 30rpx;
        background: #ffffff;
        border-radius: 16rpx;
    }

    .info-row {
        display: flex;
    }

    .info-row-left {
        flex: 1;
        color: $grey;
        font-size: $font-normal;
        margin-bottom: 17rpx;
    }

    .info-row-right {
        color: $black;
        font-size: $font-normal;
        margin-bottom: 17rpx;
    }
}

// 销售记录列表
.sale-list {
    padding: 30rpx;

    .sale-i {}

    .sale-time {
        display: flex;
        align-items: center;

    }

    .sale-fixed-width {
        width: 42rpx;
    }

    .decorate-time {
        width: 29rpx;
        height: 29rpx;
        border: 2px solid #DEE0E3;
        border-radius: 50%;
        @include flex-center;
    }

    .decorate-within {
        width: 15rpx;
        height: 15rpx;
        background: #DEE0E3;
        border-radius: 50%;
    }

    .time {
        color: $black;
        font-size: $font-normal;
    }

    .sale-content {
        margin: 13rpx 0 13rpx 18rpx;
        border-left: 1rpx solid #DEE0E3;
        display: flex;
        align-items: center;
        padding-left: 25rpx;
    }

    .sale-content-active {
        border-left: none;
    }

    .sale-line {
        height: 100%;
    }

    .sale-content-box {
        padding: 25rpx 0;
        flex: 1;

        .box {
            padding: 30rpx;
            background: #ffffff;
            border-radius: 16rpx;
        }

        .row-i {
            color: $grey;
            font-size: $font-normal;
        }

        .row-i-active {
            margin-bottom: 24rpx;
        }

        .num {
            color: $black;
            font-size: $font-normal;
        }
    }
}

// 运营数据css
.operate {
    padding: 30rpx;
}

.operate-box {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 39rpx 30rpx 0 30rpx;

    .title {
        color: $black;
        font-size: $font-normal;
        font-weight: bold;
    }

    .box-list {
        @include flex-between;
        flex-wrap: wrap;
        margin: 30rpx 0 30rpx 0;
    }

    .box-i {
        width: calc(100% / 2.3);
        background: #F4F4F7;
        padding: 23rpx 0 23rpx 30rpx;
        border-radius: 16rpx;
        margin-bottom: 30rpx;
    }

    .title {
        color: #565868;
        font-weight: bold;
    }

    .num {
        color: $black;
        font-weight: bold;
        font-size: $font-large;
        margin-top: 10rpx;
    }

    .company {
        font-size: $font-small;
    }
}

.tab-time {
    flex: none;
}

.screen-i {
    border-radius: 8rpx;
    border: 1rpx solid #DEE0E3;
    padding: 12rpx 15rpx;
    color: #565868;
    font-size: $font-base;

    .drop-down {
        width: 22rpx;
        height: 20rpx;
    }
}

.screen-i-special {
    margin-left: 16rpx;
}

.contacts-list {
    margin-right: 40rpx;
}

.portrait-i {
    margin-right: -20rpx;
}</style>
